<template>
  <div class="maintain">
    <TopFilter
      :list="topFilterList"
      :cols="4"
      @filterChange="changeHandle"
      @onCollapse="collapseHandle"
    ></TopFilter>

    <FilterTable
      ref="table"
      :columns="columns"
      :mergeCellMethod="arraySpanMethod"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => this.columns = columns"
    >
    <template slot="controls" slot-scope="props">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addHandle">新增</el-button>
      </template>
    </FilterTable>
    <el-dialog
      :visible.sync="visible"
      :title="dialogTitle"
      :rowData="formData"
      :width="dialogWidth"
      left>
      <!-- 发布 -->
      <div v-if="dialogTitle == '发布'?true:false">
            <p style="padding:0 0 20px 0;">确定发布吗?</p>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeVisible">取 消</el-button>
                <el-button type="primary" @click="deleteHandler">确 定</el-button>
            </div>
      </div>
      <!-- 新增 -->
      <div v-else>
        <!-- 公告标题： -->
          <div class="maintainTit">
            <span class="red">*</span> 公告标题：
            <el-input
              type="text"
              placeholder="请输入内容"
              v-model="text"
              maxlength="30"
              show-word-limit
            >
            </el-input>
          </div>
          <!-- 公告内容： -->
          <div class="maintainTit2">
            <span class="red">*</span> 公告内容：
            <tinymce v-if='visible' v-model="content" :height="300" actionUrl="/api/basedata/upload" />
          </div>
          <!-- 是否需要确认： -->
          <div class="maintainTit3" v-show="isShow">
            <span class="red">*</span> 是否需要确认&nbsp;&nbsp;&nbsp;&nbsp;
            <el-radio v-model="radio" label="10041001">是</el-radio>
            <el-radio v-model="radio" label="10041002">否</el-radio>
          </div>
          <!-- 查看的是否需要确认： -->
          <div class="maintainTit3" v-show="!isShow">
            <span class="red">*</span> 是否需要确认&nbsp;&nbsp;&nbsp;&nbsp;
            <p>{{radio == '10041001'?'是':'否'}}</p>
          </div>
          <!-- 若需要确认则显示 -->
         <div v-show="dialogTitle == '新增'?false:true">
            <div class="confirm" v-show="radio == '10041001'?true:false">
              <p class="confirmP">已确认：{{Confirmed}}</p>
              <p class="confirmP">待确认：{{Confirm}}</p>
            </div>
         </div>
          <div class="bottomBtn">
            <el-button @click="addMaintain('返回')" type="">返回</el-button>
            <el-button @click="addMaintain('保存')" v-show="isShow" type="primary">保存</el-button>
            <el-button @click="addMaintain('直接发布')" v-show="isShow" type="success">直接发布</el-button>
          </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getManage,postManage,updateStatus,updateNotice,updateNoticeSend} from '@/api/common/notice/maintain/index';
import { dictionary } from '@/utils/dictMixin';

export default {
  name: 'maintain',
  mixins: [dictionary],
  
  data() {
    return {
      isShow:true,
      dialogWidth:'20%',
      topFilterList: this.createTopFilters(),
      fetchParams: {},
      visible: false,
      dialogTitle: '',
      fetchApi: getManage,
      columns: this.createTableColumns(),
      formData: {},
      dataType:'',
      instance:'',
      text:'',
      content:'',
      radio: '10041001',
      Confirmed:"关键字,关键字",
      Confirm:"关键字",
      updateStatusData:''
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex  === 3) {
          if (columnIndex === 1) {
            return [1, 2];      // 跨列
          } else if (columnIndex === 2) {
            return [0, 0];      // 第二列置空
          }
      }else if (columnIndex === 2) {
          if (rowIndex  === 0) {
            return {      // 跨行
              rowspan: 2,
              colspan: 1
            };
          }else if(rowIndex === 1){
            return {     // 第二行置空
              rowspan: 0,
              colspan: 0
            };
          } else {
            return {
              rowspan: 1,
              colspan: 1
            };
          }
      }
    },
    createTopFilters() {
        return [    
            {
            type: 'INPUT',
            label: '关键字',
            fieldName: 'msgTiteCont',
            placeholder: '请输入...',
            initialValue: '',
            style: { width: '200px' },
            },
            {
            type: 'DATE',
            dateType: 'quarter',
            label: '保存时间',
            fieldName: 'quarter',
            placeholder: '请输入...',
            initialValue: '',
            style: { width: '200px' },
            },
            {
            type: 'RANGE_DATE',
            label: '发布时间',
            fieldName: 'beginTime|endTime',
            placeholder: '请输入...',
            initialValue: '',
            style: { width: '200px' },
            }
        ];
    },
    createTableColumns(visible) {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 120,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" disabled={props.row.msgStatus == 10651002?false:true} type="text" onClick={() => this.showHandle(props.row)}>
                  查看
                </el-button>
                <el-button size="mini" disabled={props.row.msgStatus == 10651001?false:true} type="text" onClick={() => this.editHandle(props.row)}>
                  编辑
                </el-button>
                <el-button size="mini" disabled={props.row.msgStatus == 10651001?false:true} type="text" onClick={() => this.isSend(props.row)}>
                  发布
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          },
          children: [
            {
              title: 'HH',
              sorter: true,
              render: props => {
                return <span class="long-title">111</span>;
              }
            },
            {
              title: 'BB',
              render: props => {
                return <span class="long-title">22</span>;
              }
            },
          ]
        },
        {
          title: '保存时间',
          dataIndex: 'createdAt',
          sorter: true,
          width: 160,
          //filter: true,
          filterType: 'input'
        },
        {
          title: '发布时间',
          dataIndex: 'msgNoticeTime',
          sorter: true,
          width: 150,
          //filter: true,
          filterType: 'input'
        },
        {
          title: '标题',
          dataIndex: 'msgTitle',
          hidden:false,
          sorter: true,
          width: 120,
          //filter: true,
          filterType: 'input'
        },
        {
          title: '内容',
          dataIndex: 'msgContent',
          sorter: true,
          //filter: true,
          filterType: 'input',
          render: props => {
            let divhtml=`${props.row.msgContent}`
            return <div domPropsInnerHTML={divhtml}></div>;
          }
        },
        {
          title: '状态',
          width: 60,
          dataIndex: 'msgStatus',
          sorter: true,
          //filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1065'),
          render: props => {
            return <span>{this.createDictText(props.row.msgStatus, '1065')}</span>;
          }
        },
      ];
    },
    getCookie(){
        let allCookie=document.cookie.split(';')
        allCookie.forEach(x=>{
            if(x.indexOf('dataType') > -1 ){
              this.dataType=x.split('=')[1]
            }
        })
        //判断是否为厂端
        if(this.dataType != 10461001){
          this.columns[4].hidden=true
        }else{
          this.columns[4].hidden=false
        }
    },
    //确认发布
    isSend(row){
        this.dialogWidth="20%"
        this.visible=true
        this.dialogTitle='发布'
        this.updateStatusData=row
    },
    // 确定发布
    deleteHandler(){
        this.visible = false;
        console.log(this.updateStatusData,"updateStatusData")
        updateStatus(this.updateStatusData,this.updateStatusData.msgId).then(res=>{
          console.log(res,"updateStatus")
        })
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
    },
    // 取消发布
    closeVisible(){
        this.visible = false;
    },
    // 新增
    addHandle(){
        console.log('新增')
        this.dialogWidth="60%"
        this.isShow=true
        this.visible=true
        this.dialogTitle='新增'
        this.text=''
        this.content=''
        this.radio=''
    },
    //新增底部事件
    addMaintain(dataType){
      if(dataType == '返回'){
        this.text=''
        this.content=''
        this.radio=''
        this.visible=false
      }else if(dataType == '保存'){
        console.log(this.dialogTitle,this.text,this.content,this.radio,"保存")
        if(this.dialogTitle == '新增'){
          // 新增
           let params={
            msgTitle:this.text,
            msgContent:this.content,
            noticeConfirm:this.radio,
            msgStatus:'10651001'
            
          }
          
          postManage(params).then(res=>{
            console.log(res,"新增保存")
            if(res.resultCode == 200){
                this.visible=false
                // 重新加载
                this.fetchParams = { ...this.fetchParams };
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
            }
          })
        }else if(this.dialogTitle == '编辑'){
            // 编辑
            this.updateStatusData.msgTitle=this.text
            this.updateStatusData.msgContent=this.content
            this.updateStatusData.noticeConfirm=this.radio

            console.log(this.updateStatusData,"this.updateStatusData编辑")
            updateNotice(this.updateStatusData).then(res=>{
                  console.log(res,"编辑保存")
                  if(res.resultCode == 200){
                      this.visible=false
                      this.$message({
                        message: '保存成功',
                        type: 'success'
                      });
                  }
          })
        }
       
        
      }else if(dataType == '直接发布'){
        console.log(this.dialogTitle,this.text,this.content,this.radio,"直接发布")
        if(this.dialogTitle == '新增'){
          // 新增
            let params={
              msgTitle:this.text,
              msgContent:this.content,
              noticeConfirm:this.radio,
              msgStatus:'10651002'
            }
            postManage(params).then(res=>{
              console.log(res,"新增直接发布")
              if(res.resultCode == 200){
                  this.visible=false
                  // 重新加载
                  this.fetchParams = { ...this.fetchParams };
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  });
              }
            })
        }else if(this.dialogTitle == '编辑'){
            // 编辑
            this.updateStatusData.msgTitle=this.text
            this.updateStatusData.msgContent=this.content
            this.updateStatusData.noticeConfirm=this.radio

            console.log(this.updateStatusData,"this.updateStatusData编辑")
             updateNoticeSend(this.updateStatusData,this.updateStatusData.msgId).then(res=>{
                  console.log(res,"编辑直接发布")
                  if(res.resultCode == 200){
                      this.visible=false
                      // 重新加载
                      this.fetchParams = { ...this.fetchParams };
                      this.$message({
                        message: '发布成功',
                        type: 'success'
                      });
                  }
          })
        }
        
        // 重新加载
        // this.fetchParams = { ...this.fetchParams };
      }
    },
    // 查看
    showHandle(row){
        this.dialogWidth="60%"
        this.isShow=false
        this.visible=true
        this.dialogTitle='查看'
        this.text=row.msgTitle
        this.content=row.msgContent
        this.radio=`${row.noticeConfirm}`
    },
    // 编辑
    editHandle(row) {
        this.dialogWidth="60%"
        this.isShow=true
        this.visible=true
        this.dialogTitle='编辑'
        this.updateStatusData=row
        this.text=row.msgTitle
        this.content=row.msgContent
        this.radio=`${row.noticeConfirm}`
    },
    
    //搜索
    changeHandle(val) {
        console.log(val,"val")
      this.fetchParams = Object.assign({ sort: 'wayId', order: 'desc'}, val);
    },
    //重置
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    
    // closeHandler(val, type) {
    //   this.visible = val;
    //   if (type === 'refresh') {
    //     // 重新加载
    //     this.fetchParams = { ...this.fetchParams };
    //   }
    // }
  },
   
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getCookie()
  },
  created() {
  }
};
</script>

<style lang="less" >
 .maintain {
   .btn{
        border: 1px solid #1682e6;
        background: #1682e6;
        color: #fff;
        font-size: 14px;
        width: 23%;
        text-align: center;
        height: 24px;
        line-height: 24px;
        border-radius: 5px;
        // position: relative;
        // left: 274%;
        float: right;
        cursor: pointer;
    }
    .dialog-footer{
      text-align: center;
    }
    .maintainTit{
      line-height: 34px;
      height: 34px;
      min-width: 50%;
      display: flex;
      margin: 10px 0;
      .red{
        color: red;
      }
      .el-input{
        width: 30%;
      }
     
    }
    .maintainTit2{
      line-height: 34px;
      min-width: 50%;
      display: flex;
      margin: 10px 0;
      .red{
        color: red;
      }
      .el-input{
        width: 30%;
      }
    }
    .maintainTit3{
      height: 20px;
      min-width: 50%;
      display: flex;
      margin: 30px 0 0 0;
      .red{
        color: red;
      }
      .el-input{
        width: 30%;
      }
    }
    .confirm{
      .confirmP{
        margin: 10px 0 0 36px;
      }
    }
    .bottomBtn{
      text-align: center;
    }
 }
</style>
